/**
 * Created by Administrator on 2017/5/12.
 */
$(document).ready(function () {
    $('#letter-a a').click(function (e) {
        e.preventDefault();
        $('#dictionary').hide().load('a.hmtl', function () {
            $(this).fadeIn();
        });
    });

    $('#letter-b a').click(function (e) {
        e.preventDefault();
        $.getJSON('b.json', function (data) {
            var html = [];
            $.each(data, function (index, item) {
                html = html.concat([
                    '<div class="entry">',
                    '<h3 class="term">', item.term, '</h3>',
                    '<div class="part">', item.part, '</div>',
                    '<div class="definition">', item.definition
                ]);
                if (item.quote) {
                    html = html.concat('<div class="quote">');
                    $.each(item.quote, function (index, item) {
                        html = html.concat(['<div class="quote-line">', item, '</div>']);
                    });
                    if (item.author) {
                        html = html.concat(['<div class="quote-author">', item.author, '</div>']);
                    }
                    html = html.concat('</div>')
                }
                html = html.concat(['</div>', '</div>']);
            });
            html = html.join('');
            $('#dictionary').html(html);
        });
    });

    $('#letter-c a').click(function (e) {
        e.preventDefault();
        $.getScript('c.js');
    });

    $('#letter-d a').click(function (e) {
        e.preventDefault();
        $.get('d.xml', function (data) {
            $('#dictionary').empty();
            $(data).find('entry').each(function () {
                var $entry = $(this);
                var html = [];
                html = html.concat([
                    '<div class="entry">',
                    '<h3 class="term">', $entry.attr('term'), '</h3>',
                    '<div class="part">', $entry.attr('part'), '</div>',
                    '<div class="definition">', $entry.find('definition').text()
                ]);
                var $quote = $entry.find('quote');
                if ($quote.lenght) {
                    html = html.concat('<div class="quote">');
                    $quote.find('line').each(function () {
                        html = html.concat([
                            '<div class="quote-line">', $(this).text(), '</div>'
                        ]);
                    });
                    if ($quote.attr('author')) {
                        html = html.concat([
                            '<div class="quote-author">', $quote.attr('author'), '</div>'
                        ]);
                    }
                    html = html.concat('</div>')
                }
                html = html.concat(['</div>', '</div>']);
                $('#dictionary').append(html.join(''));
            });
        });
    });

    $('#letter-e a').click(function (e) {
        e.preventDefault();
        var requestData = { term: $(this).text() };
        $.get('z.html', requestData, function (data) {
            $('#dictionary').html(data);
        }).fail(function (jqXHR) {
            $('#dictionary').html('An error occurred: ' + jqXHR.status).append(jqXHR.responseText);
        });
    });

    $('#letter-f form').submit(function (e) {
        $.get('http://localhost:3000/', { term: $('input[name="term"]').val() }, function (data) {
            $('#dictionary').html(data);
        });
    });

    var url = 'http://examples.learningjquery.com/jsonp/g.php';
    $('#letter-g a').click(function (e) {
        e.preventDefault();
        $.getJSON(url + '?callback=?', function (data) {
            var html = [];
            $.each(data, function (index, item) {
                var html = [
                    '<div class="entry">',
                    '<h3 class="term">', item.term, '</h3>',
                    '<div class="part">', item.part, '<div>',
                    '<div class="definition">', item.definition
                ];
                if (item.quote) {
                    html += html.concat('<div class="quote">');
                    $.each(item.quote, function (index, item) {
                        html += html.concat(['<div class="quote-line">', line, '</div>']);
                    });
                    html += html.concat('</div>');
                }
                html += html.concat(['</div>', '</div>']);
            });
            $('#dictionary').html(html.join(''));
        });
    });

    $('#letter-h a').click(function (e) {
        e.preventDefault();
        $('#dictionary').load('h.html .entry');
    });

    var $loading = $('<div id="loading">Loading</div>').insertBefore('#dictionary');
    $(document).ajaxStart(function () {
        $loading.show();
    }).ajaxStop(function () {
        $loading.hide();
    });

    $('body').on('click', 'h3.term', function () {
        $(this).siblings('.definition').slideToggle();
    });
});